<template>
	<el-drawer v-model="isDrawerVisible" title="菜品详情" :with-header="true">
	    <el-descriptions direction="vertical" :column="3" size="large" border>
			<el-descriptions-item label="菜品ID">{{dishes.id}}</el-descriptions-item>
			<el-descriptions-item label="菜名">{{dishes.name}}</el-descriptions-item>
			<el-descriptions-item label="价格">{{dishes.price}}</el-descriptions-item>
			<el-descriptions-item label="店铺ID">{{dishes.shop_id}}</el-descriptions-item>
			<el-descriptions-item label="状态">{{dishes.state== 1 ? "上架" : "下架"}}</el-descriptions-item>
			<el-descriptions-item label="图片">{{dishes.picture}}</el-descriptions-item>
			<el-descriptions-item label="分类">{{dishes.dishes_class}}</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const dishes = ref({
	id: '',
	name: '',
	price: '',
	shop_id: '',
	state: '',
	picture: '',
	dishes_class: ''
});

// 接收父组件传递过来的 对象 数据
const handleDetailData = (obj) => {
	isDrawerVisible.value = true;
	dishes.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
	handleDetailData
})
</script>